<script lang="jsx" setup>
import api from './api'
const props = defineProps({
  sku: { type: String, default: '' },
})
const tableRef = ref()
const query = () => {
  tableRef.value.query()
}
defineExpose({query})
// 列表配置
const tableOptions = reactive({
  size: 'small',
  rowConfig: { height: 90 },
  columns: [
    {
      minWidth: 160, slots: {
        header: () => <div>备料单<br />备料状态</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.plan_no} />
            <VText value={row.plan_status_name} />
          </div>
        }
      }
    },
    {
      field: 'department_name', title: '需求部门', minWidth: 120, line: 2
    },
    {
      minWidth: 80,
      slots: {
        header: () => <div>SKU<br />ASIN</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.sku} />
            <VText value={row.asin} />
          </div>
        }
      }
    },
    {
      minWidth: 140,
      slots: {
        header: () => <div>供应商名称<br />供应商代码</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.supplier_name} line={2} />
            <VText value={row.supplier_coding} />
          </div>
        }
      }
    },
    {
      minWidth: 100,
      slots: {
        header: () => <div>国家<br />目的仓</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.country_name} />
            <VText value={row.destination_warehouse_name} />
          </div>
        }
      }
    },
    {
      minWidth: 110, slots: {
        header: () => <div>采购员<br />销售人员</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.purchase_user_name} />
            <VText value={row.sale_name} />
          </div>
        }
      }
    },
    {
      minWidth: 100,
      slots: {
        header: () => <div>数量</div>,
        default: ({ row }) => {
          return <div>
            <VText title="备料数量" value={row.plan_num} />
            <VText title="已下PR数" value={row.demand_num} />
            <VText title="已下PO数" value={row.total_plan_num} />
            <VText title="余料数" value={row.leave_num} />
          </div>
        }
      }
    },
    {
      minWidth: 110,
      slots: {
        header: () => <div>采购未税价<br />采购未税报价<br />含税单价</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.unit_price} />
            <VText value={row.purchase_untaxed_price} />
            <VText value={row.unit_price_tax} />
          </div>
        }
      }
    },
    {
      minWidth: 100,
      slots: {
        header: () => <div>工厂确认出货时间<br />计划预计下单时间</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.pre_factory_time} />
            <VText value={row.expect_order_time} />
          </div>
        }
      }
    },
    {
      minWidth: 120,
      slots: {
        header: () => <div>申请人<br />申请时间</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.create_user} />
            <VText value={row.create_time} />
          </div>
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form:f }) => api.planHistory({ ...f, ...page, sku: props.sku }).then(res => {
        const {list: data, total} = res.data
        return { data, total }
      })
    }
  }
})
</script>
<template>
  <div style="height: 660px;">
    <VTable ref="tableRef" v-bind="tableOptions" />
  </div>
</template>
